<template>
	<view>
		<view class="card">
			<view class="line">
				<view class="img"></view>
				<view class="">

					<view class="">
						{{shopList.status ==1?$t("order.consignment"):shopList.status ==2?$t("order.pending"):shopList.status ==3?$t("order.confirm"):shopList.status ==4?$t("order.complete"):shopList.status ==10?$t("order.appeal"):shopList.status ==8?$t("order.appeal-success"):shopList.status ==9?$t("order.appeal-fail"):$t("order.unfinished")}}
					</view>

					<view class="num">
						{{shopList.status ==1?$t("order.order.consignment"):shopList.status ==2?$t("order.order.pending"):shopList.status ==3?$t("order.order.confirm"):shopList.status ==4?$t("order.order.complete"):shopList.status ==10?$t("order.order.appeal"):shopList.status ==8?$t("order.order.appeal-success"):shopList.status ==9?$t("order.order.appeal-fail"):$t("order.order.unfinished")}}
					</view>

				</view>
			</view>
		</view>

		<view class="info">
			<view class="info_box">
				<view class="image">
					<img :src="shopList.img" alt="" style="width: 100%;height: 100%;" />
				</view>
				<view class="title">

					<view class="name">{{shopList.productName}}</view>
					<view class="price">{{shopList.price}}u</view>
				</view>
			</view>
			<view class="actually">
				<view class="">{{$t("order.actual-payment")}}:</view>
				<view class="price">{{shopList.photosPrice}}u</view>
			</view>
		</view>

		<view class="card_detail">
			<span style="font-weight: bold;">{{$t("order.detail")}}</span>
			<view class="txt_btn">
				<view class="tit" style="width: 77%;">
					<view class="txt_left">{{$t("order.no")}} :</view>
					<view class="" style="word-break: break-all;width: 70%;">{{shopList.orderNo}}</view>
				</view>
				<view class="" >
					<button type="primary" size="mini" @click="copy">{{$t("public.copy-button")}}</button>
				</view>
				
			</view>

			<view class="tit">
				<view class="txt_left">{{$t("order.place-data")}} :</view>
				<view class="">{{shopList.failureTime}}</view>
			</view>

			<view class="tit" v-if="shopList.status == 8 || shopList.status == 9">
				<view class="txt_left">{{$t("order.voucher")}}  :</view>

					<view class="checkImg" @click="LookpinZheng(shopList.reviewImage)">
						{{$t("order.view-voucher")}}
					</view>
			
			</view>

			<view class="tit" v-if="shopList.status == 1">
				<view class="txt_left">{{$t("order.view-voucher")}} :</view>



				<view class="" v-if="shopList.status == 1">


					<view class="checkImg" @click="upload(shopList.id)">
						{{$t("order.upload-voucher")}}
					</view>
				</view>

			<!-- 	<view class="" v-else>


					<view class="checkImg" @click="look(shopList.img)">
						查看凭证
					</view>
				</view> -->
			</view>
		</view>
		

<view class="card_address" v-if="comfirmList.phone">
			<view class="tit">
				<view class="txt_left" style="font-weight: bold;">{{$t("order.buyer-information")}}</view>
				
			</view>
			<view class="tit">
				<view class="txt_left">{{$t("user.phone")}} :</view>
				<view class="">{{comfirmList.phone}}</view>
			</view>
			<view class="tit">
				<view class="txt_left">{{"user.email"}} :</view>
				<view class="">{{comfirmList.mail}}</view>
			</view>
			
		</view>
		
		<!-- <view class="card_address" v-if="comfirmList.phone">
					<view class="tit">
						<view class="txt_left" style="font-weight: bold;">买家信息</view>
						
					</view>
					<view class="tit">
						<view class="txt_left">手机号码 :</view>
						<view class="">{{comfirmList.phone}}</view>
					</view>                
					<view class="tit">
						<view class="txt_left">邮箱 :</view>
						<view class="">{{comfirmList.mail}}</view>
					</view>
					
				</view> -->



		<view class="card_address" v-for="item in addressList">
			<view class="tit">
				<view class="txt_left">支付信息 :</view>
				<view class="">{{item.network}}</view>
			</view>
			<view class="tit">
				<view class="txt_left">收款地址 :</view>
				<view class="">{{item.walletAddress}}</view>
			</view>
			<view class="tit">
				<view class="txt_left">联系方式 :</view>
				<view class="">{{item.phone}}</view>
			</view>
			<view class="tit">
				<view class="txt_left">时间 :</view>
				<view class="">{{item.updateTime}}</view>
			</view>
			<view class="tit">
				<view class="txt_left">查看二维码 :</view>
				<view class="checkImg" @click="look(item.qrcodeUrl)">
					查看二维码
				</view>
			</view>
		</view>




		<!-- 		<view class="bottom">
			<view class="bottom_btn">
				<button type="primary" class="btn">联系客服</button>
				<button type="warn" class="btn">删除订单</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		OrderInfo,
		OrderDetail,
		imageReview,
		comfirmDetail
	} from '@/api/new.js'
	export default {
		data() {
			return {
				shopList: {},
				addressList: [],
				comfirmList:{}
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: this.$t("order.seller-Order-Details")
			})
			console.log(e, 'idddddddddddddddd');

			OrderInfo(e.orderNo).then(res => {
				console.log(res, 'res');
				this.shopList = res.data


			}).catch(err => {
				this.$util.Tips({
					title: err
				});
			})
			if(e.id){
				comfirmDetail(e.id).then(res=>{
						console.log(res,'respppp');
						this.comfirmList = res.data
				})
			}
			
			
			
			//地址
			// OrderDetail(res.data.id).then(res=>{
			// 	console.log(res,'res');
			// 	this.addressList = res.data

			// }).catch(err => {
			// 	this.$util.Tips({
			// 		title: err
			// 	});
			// })

		},
		methods: {
			upload(id) {
				let that = this;

				that.$util.uploadImageOne({
					url: 'userAuthCollectionUpload',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					// that.newAvatar = res.data.url;
					console.log(res, '!!!!!');
					let data = {
						imageUrl: res.data.url,
						userPayStoreId: id
					}
					console.log(data, 'data');
					imageReview(data).then(res => {
							console.log(res, '????????');
							that.$util.Tips({
								title: res.data.msg
							});
							// this.waitpick = false
							// this.getList()
						})
						.catch(res => {
							that.$util.Tips({
								title: res
							});
						});
				});
			},
			look(pic) {
				console.log(pic, '...');
				let imgsArray = [];
				imgsArray[0] = pic;
				uni.previewImage({
					urls: imgsArray,
					current: 0
				});
				
				

			},
			LookpinZheng(e){
				let imgsArray = e.split(',')
								
								uni.previewImage({
									urls: imgsArray,
									current: 0
								});
			},
			copy() {
				let that = this
				uni.setClipboardData({
					data: that.shopList.orderNo,
					success() {
						that.$util.Tips({
							title: this.$t("public.tips.copy")
						})
					}
				})
			},
			detail(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.bottom {

		position: absolute;
		bottom: 10px;
		display: flex;
		/* height: 50px; */
		padding: 20px 0;
		width: 100%;
		background: #fff;
	}

	.bottom_btn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 10px;
		height: 30px;

		.btn {
			height: 35px;
			padding: 5px 10px;
		}
	}

	.txt_left {
		margin-right: 5px;
	}

	.txt_btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.actually {
		display: flex;
		justify-content: flex-end;
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;
		flex: 1
	}

	.name {
		font-weight: 700;
		font-size: 19px
	}

	.price {
		color: #d9001b;
		font-weight: 700;
		font-size: 19px
	}

	.image {
		height: 120px;
		width: 120px;
		/* background: aqua; */

	}

	.info {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
		/* height: 250px; */
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}

	.info_box {
		display: flex;
		justify-content: space-between;
		flex: 1
	}

	.img {
		/* background-color: aqua; */
		width: 56px;
		height: 40px;
		margin-right: 10px;
	}

	.card {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
	}

	.line {
		padding: 10px;
		display: flex;

	}

	.num {
		font-weight: bold;
	}

	.card_detail {
		margin: 20px 10px;
		padding: 10px 10px;
		/* height: 200px; */
		background-color: #fff;
		border-radius: 8px;
	}

	.card_address {
		margin: 20px 10px;
		padding: 10px 10px;
		/* height: 200px; */
		background-color: #fff;
		border-radius: 8px;
	}

	.tit {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		margin: 10px 0;

		.checkImg {
			color: #0451a5;
			cursor: pointer;
			/* text-decoration: underline; */
			border-bottom: 1px solid #0451a5;
		}
	}
</style>